<template>
  <div class="wrapper-markdown">
    <div class="wrapper-editor">
      <textarea class="editor" v-model="rawContent"></textarea>
      <markdown-render class="preview" :content="rawContent"></markdown-render>
    </div>
    <div class="foot-bar">
      <div class="tools">
        <div class="left">
          <iconfont icon="markdown"/>
          <iconfont icon="image"/>
        </div>
        <div class="right">
          <iconfont icon="mel-rightend"/>
        </div>
      </div>
      <div class="status">
        <div class="left">预览</div>
        <div class="right">1 字</div>
      </div>
    </div>
  </div>
</template>

<script>
import MarkdownRender from '@/components/markdown-render'
import defaultOptions from './defaultOptions'

export default {
  name: 'Markdown',
  props: {
    language: {
      type: String,
      default: ''
    },
    content: {
      type: String,
      default: ''
    },
    options: {
      type: Object,
      default() {
        return defaultOptions
      }
    }
  },
  components: {
    MarkdownRender
  },
  data() {
    return {
      rawContent: this.content
    }
  },
  computed: {
    editorOptions() {
      const options = {
        ...defaultOptions,
        ...this.options,
        language: this.language
      }
      return options
    }
  },
  methods: {
    initEditor() {},
    destroyEditor() {}
  },
  watch: {
    language(val) {}
  },
  mounted() {
    this.initEditor()
  },
  destroyed() {
    this.destroyEditor()
  }
}
</script>

<style lang="stylus" scoped>
.wrapper-markdown
  display flex
  flex-direction column
  height 100%
  border 1px solid #ccc
  .toolbar
    border-bottom 1px solid #ccc
  .wrapper-editor
    display flex
    flex 1
    .editor
      flex 1
      padding 20px
      border none
      background-color #f0f0f0
      outline none
      resize none
    .preview
      flex 1
      padding 20px
      border-left 1px solid #ccc
  .foot-bar
    display flex
    border-top 1px solid #ccc
    > div
      display flex
      flex 1
      padding 10px
      .left
        flex 1
    .status
      border-left 1px solid #ccc
</style>
